iT邦幫忙

2022 iThome 鐵人賽

DAY 21
0
Modern Web

【每天5分鐘】學前端系列 第 21

Day21【每天5分鐘】學前端 | JavaScript 流程控制 switch case

  • 分享至 

  • xImage
  •  

昨天認識了 流程控制 的 if else ,今天來認識另外一個 switch case
目的都是根據不同的條件,執行不同的操作。

switch case

switch 的後面有一對小括號 ( ) , ( ) 內放入要判斷的 條件
條件值 符合 case 後面的 ,執行該 case 下的操作。case 可以有很多個。
switch 使用 嚴格相等(===) 的比較,也就是說會比較型別。
" 1 "(字串)和 1(數字)視為不同。

程式碼是由 上到下 去判斷的,break; 的作用是會 跳出 該流程控制。
若所有的 case 值都不符合,則執行 default 下的操作。

break; 很重要,要記得加喔!

格式如下:

switch ( x ){
    case y :
        若 x 值符合上述 y , 執行此區塊
        break;
    case z :
        若 x 值符合上述 z , 執行此區塊
        break;
    default:
        若 x 值和以上 y & z 都不符合, 執行此區塊
        break;
}

舉例:

let fruit = "apple";

switch (fruit){
    case "apple":
        console.log("蘋果");
        break;
    case "orange":
        console.log("橘子");
        break;
    default:
        console.log("其他水果");
        break;
}
// 主控台顯示:蘋果

解說:

let fruit = "orange"; // 自訂義變數 fruit 的值為字串 orange

switch (fruit){ // 要來比對 fruit 的值囉!
    case "apple": // 如果 fruit 的值是 apple 就進來(哇不是,那掰掰~~)
        console.log("蘋果");
        break;
    case "orange": // 如果 fruit 的值是 orange 就進來(沒錯,進去看看要做什麼事情)
        console.log("橘子"); // 要在主控台顯示:橘子
        break; // 跳出流程控制
    default:
        console.log("其他水果");
        break;
}
// 主控台顯示:橘子
let fruit = "apple"; let fruit = "orange"; let fruit = "kiwi";
https://ithelp.ithome.com.tw/upload/images/20220922/20151346J8NPGZIaM0.png https://ithelp.ithome.com.tw/upload/images/20220922/20151346f0Y06lHjuS.png https://ithelp.ithome.com.tw/upload/images/20220922/20151346j2v9Uu5kop.png
蘋果 橘子 其他水果

如果忘記加 break 會發生什麼事?

switch 的特性是會比對條件值是否符合 case 的值,
然後執行這個 case 裡面的操作,
以及此一符合 case 以外,剩下其他的操作,直到它遇見 break;

如果不加 break; 讓它跳出流程控制的話,
它只要找到一個符合的 case ,除了執行該 case 的操作以外,
後面的所有操作,它也 都會幫你執行

我們來看看上述範例,沒加 break; 的話會變成怎麼樣 ...

let fruit = "apple"; let fruit = "orange"; let fruit = "kiwi";
https://ithelp.ithome.com.tw/upload/images/20220922/20151346nGBg9NYr39.png https://ithelp.ithome.com.tw/upload/images/20220922/20151346NbCS47XLOV.png https://ithelp.ithome.com.tw/upload/images/20220922/20151346BckKHGQfFM.png
蘋果、橘子、其他水果 橘子、其他水果 其他水果

/images/emoticon/emoticon26.gif


小明跟月老許願,他想要有一個可愛的女朋友,
他寫了一段程式碼:

// 可是他忘記在每個 case 後面加上 break; 了
let myGirl = "cute";
switch(myGirl){
    case "cute":
        console.log("可愛的女朋友");
    case "crazy":
        console.log("瘋狂的女朋友");
    default:
        console.log("壞心的女朋友");
        break;
}

月老看到程式碼很開心:噢噢我最近也學了 JavaScript 的 switch!
發現第一個 case 符合,於是把剩下的通通都塞給小明了,直到遇見 break; 結案

/images/emoticon/emoticon06.gif /images/emoticon/emoticon06.gif


什麼時候該用 if else ? 什麼時候用 switch ?

請依專案當時的情況去 判斷 適合 使用哪一個,
或者使用哪一個的程式碼可以更為 簡潔 、自己或合作對象的 喜好 等而定。

附上 switch 介紹 W3School 連結MDN 連結


https://ithelp.ithome.com.tw/upload/images/20220922/20151346W83x6wh04D.png 練習看看自己設計 switch 程式吧!



本來明天要開始介紹 迴圈控制 forwhile
但一直講邏輯的東西,好像很無趣。
如果超想知道,可以先自學喔~

明天會讓 RWD (響應式網頁設計) 插隊一天,做個簡單介紹 ٩(◦`꒳´◦)۶

感謝閱讀,我們明天見囉~~~ /images/emoticon/emoticon29.gif


上一篇
Day20【每天5分鐘】學前端 | JavaScript 流程控制 if else
下一篇
Day22【每天5分鐘】學前端 | CSS RWD 響應式網頁設計
系列文
【每天5分鐘】學前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言